<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/njmu.jpg" alt="">
        <span class="title">Gremmie's BlogSystem</span>
        <!-- 这个Spacer用来占位置 -->
        <span class="spacer"></span>
        <!-- 来几个按钮 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="https://blog.csdn.net/qq_63511424">CSDN</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- 用这个 .card 来表示用户的信息 -->
            <div class="card">
                <img src="image/boy.jpg" alt="">
                <h3>Gremmie</h3>
                <a href="https://gitee.com/gremmie">Gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>
        </div>
        
        

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 用这个表示一篇博客 -->
            <div class="blog">
                <div class="title">No.1_Blog</div>
                <div class="date">2023-1-15 20:22</div>
                <div class="desc">从今天起我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia fuga, distinctio quis maxime inventore recusandae deleniti praesentium. Ea sunt officiis placeat quia doloremque cumque libero? Voluptas aliquam blanditiis incidunt mollitia?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">No.2_Blog</div>
                <div class="date">2023-1-15 20:22</div>
                <div class="desc">从今天起我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia fuga, distinctio quis maxime inventore recusandae deleniti praesentium. Ea sunt officiis placeat quia doloremque cumque libero? Voluptas aliquam blanditiis incidunt mollitia?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">No.3_Blog</div>
                <div class="date">2023-1-15 20:22</div>
                <div class="desc">从今天起我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia fuga, distinctio quis maxime inventore recusandae deleniti praesentium. Ea sunt officiis placeat quia doloremque cumque libero? Voluptas aliquam blanditiis incidunt mollitia?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">No.4_Blog</div>
                <div class="date">2023-1-15 20:22</div>
                <div class="desc">从今天起我要认真敲代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia fuga, distinctio quis maxime inventore recusandae deleniti praesentium. Ea sunt officiis placeat quia doloremque cumque libero? Voluptas aliquam blanditiis incidunt mollitia?</div>
                <a href="#">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>